<template>
    <div class="contact-container">
      <mt-header fixed :title="queryParams.msg">
          <router-link to="/login" slot="left">
            <mt-button icon='back'></mt-button>
          </router-link>
      </mt-header>
      <div ref="contact">
        <h1><img :src="imgPath" class="wechat-icon">{{ queryParams.wx }}</h1>
        <mt-button type="primary" @click='copyWechat' class='copyButton'>复制微信号</mt-button>
        <img :src="queryParams.qrurl"/>
      </div>
    </div>
</template>

<script>
import Clipboard from 'Clipboard';
import common from '../../common/common';
import { Toast } from 'mint-ui';
export default {
  name:'Contact',
  data () {
    return {
      queryParams:'',
      imgPath: `${common.imagePath}/img/wechat.png`,
      offsetTop:0
    };
  },
  mounted () {
    var urlParams = JSON.parse( this.$cookies.get(`${common.conf.storageNamespace}wechatInfo`) || null );
    if(!urlParams) return Toast('参数错误!');
    this.queryParams = {
      msg: urlParams.msg || '',
      wx: urlParams.wx || '',
      qrurl: urlParams.qrurl || ''
    };
  },
  methods: {
    copyWechat () {
      let self = this;
      const clipboard = new Clipboard('.copyButton', {
        text () {
          return self.queryParams.wx;
        }
      });
      clipboard.on('success', (e) => {
        e.clearSelection();
        clipboard.destroy();
        Toast('复制成功');
      });
    }
  }
};
</script>

<style scoped>
.contact-container{
  overflow-y: hidden;
  width: 100%;
}
.contact-container div{
  width: 100%;
  height: auto;
  margin-top: 60px;
}
.contact-container img{
  max-width: 100%;
}
.contact-container .wechat-icon{
  width: 26px;height: 26px;margin-right: 6px;
}
.copyButton{
  margin:20px;
}
</style>
